<template>
  <div style="width: 100%; height: 100%" class="fullSize">
    <div class="full-container" :style="viewStyle" id="cesiumContainer"></div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
    </div>
  </div>
</template>

<script>
import rightav9 from "@/assets/images/rightav9.jpg";
import backav9 from "@/assets/images/backav9.jpg";
import bottomav9 from "@/assets/images/bottomav9.jpg";
import frontav9 from "@/assets/images/frontav9.jpg";
import leftav9 from "@/assets/images/leftav9.jpg";
import topav9 from "@/assets/images/topav9.jpg";
export default {
  name: "EarthViewer",
  viewerProperty: {},
  props: {
    viewStyle: {},
    viewerProperty: {},
    dropBackground: {
      default: false,
    },
  },
  components: {},
  data() {
    return {
      viewer: null,
    };
  },
  computed: {},
  mounted() {
    const _this = this;
    _this.viewerDefaultProperty = {
      animation: false,
      timeline: false,
      geocoder: false,
      homeButton: false,
      navigationHelpButton: false,
      baseLayerPicker: false,
      fullscreenElement: "cesiumContainer",
      // sceneMode: 'SCENE2D' : 'SCENE3D' //初始场景模式 为二维

      fullscreenButton: false,
      shouldAnimate: true,
      infoBox: false,
      selectionIndicator: false,
      sceneModePicker: true,
      shadows: false,
      skyAtmosphere: false,
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "http://mt1.google.com/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
      }),
    };

    for (let property in _this.viewerProperty) {
      _this.viewerDefaultProperty[property] = _this.viewerProperty[property];
    }
    const res = [
      "a97aa8d9962bd7bc0d768f35aa2c3a12",
      "1f048c408cdab4c499f03ce3675af1f1",
      "31381896e06a173f122aa53fd7500ed7",
      "c08f9b3d03a67227e473dc6c3bcd0be3",
      "ee4a77e07dcdeb84e2c739641d236cbd",
    ];
    let tiandituTk = res[Math.floor(Math.random() * 5)];
    const viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false,
      timeline: false,
      geocoder: false,
      homeButton: false,
      navigationHelpButton: false,
      sceneMode: "SCENE2D", //初始场景模式 为二维
      baseLayerPicker: false,
      fullscreenElement: "cesiumContainer",
      fullscreenButton: false,
      shouldAnimate: true,
      infoBox: false,
      selectionIndicator: false,
      sceneModePicker: true,
      shadows: false,
      skyAtmosphere: false,
      skyBox: new Cesium.SkyBox({
        sources: {
          positiveX: rightav9,
          negativeX: leftav9,
          positiveY: frontav9,
          negativeY: backav9,
          positiveZ: topav9,
          negativeZ: bottomav9,
        },
      }),
      // imageryProvider: new Cesium.UrlTemplateImageryProvider({
      //   url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
      //   tilingScheme: new Cesium.WebMercatorTilingScheme(),
      //   minimumLevel: 1,
      //   maximumLevel: 20,
      // }),
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        //影像底图
        url:
          "https://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
          tiandituTk,
        subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
        layer: "tdtImgLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        maximumLevel: 18,
      }),
    });
    viewer.scene.globe.depthTestAgainstTerrain = false;
    viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        //影像注记
        url:
          "https://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +
          tiandituTk,
        subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
        layer: "tdtCiaLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        maximumLevel: 18,
      })
    );
    window.cesiumViewer = viewer;

    //清除cesium-widget-credits
    const credits = document.getElementsByClassName("cesium-widget-credits");
    credits[0].parentElement.removeChild(credits[0]);

    //禁止双击zoom
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
    viewer.scene.postProcessStages.fxaa.enabled = false;
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 15000000),
      duration: 0,
    });
    // viewer.scene.camera.setView({
    //   destination: new Cesium.Cartesian3(
    //     277096.634865404,
    //     5647834.481964232,
    //     2985563.7039122293
    //   ),
    //   orientation: {
    //     heading: 4.731089976107251,
    //     pitch: -0.32003481981370063
    //   }
    // });
  },
  methods: {},
};
</script>

<style scoped>
.fullSize,
.full-container {
  position: absolute;
  /*top: 0;*/
  /*left: 0;*/
  border: none;
  height: 100%;
  width: 100%;
  margin: 0px;
  display: inherit;
  cursor: crosshair;
}
.doubleViewer {
  width: 50%;
}
/*#cesiumContainer {*/
/*overflow: hidden;*/
/*position: fixed;*/
/*background: url('../../static/images/sky.jpg') no-repeat;*/
/*margin: 0px;*/
/*background-size: cover;*/
/*}*/

#loadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  display: none;
}

#loadingOverlay h1 {
  text-align: center;
  position: relative;
  top: 50%;
  margin-top: -0.5em;
}

#mousePositionId {
  position: absolute;
  right: 30px;
  bottom: 50px;
  z-index: 100;
  font-size: 20px;
}
.layer-picker-class {
  float: right;
}
</style>
<style>
html {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>
